diff options
Diffstat (limited to 'pages/search/[param].js')
| -rw-r--r-- | pages/search/[param].js | 60 |
1 files changed, 32 insertions, 28 deletions
diff --git a/pages/search/[param].js b/pages/search/[param].js index f38ba76..9fc2b17 100644 --- a/pages/search/[param].js +++ b/pages/search/[param].js @@ -201,14 +201,14 @@ export default function Card() { </Head> <div className="bg-primary"> <Navbar /> - <div className="min-h-screen mt-10 mb-14 text-white items-center gap-5 lg:gap-0 flex flex-col"> - <div className="w-screen px-10 lg:w-[80%] lg:h-[10rem] flex text-center lg:items-end lg:pb-16 justify-center lg:gap-10 gap-3 font-karla font-light"> + <div className="min-h-screen mt-10 mb-14 text-white items-center gap-5 xl:gap-0 flex flex-col"> + <div className="w-screen px-10 xl:w-[80%] xl:h-[10rem] flex text-center xl:items-end xl:pb-16 justify-center lg:gap-7 xl:gap-10 gap-3 font-karla font-light"> <div className="text-start"> - <h1 className="font-bold lg:pb-5 pb-3 hidden lg:block text-md pl-1 font-outfit"> + <h1 className="font-bold xl:pb-5 pb-3 hidden lg:block text-md pl-1 font-outfit"> TITLE </h1> <input - className="lg:w-[297px] lg:h-[46px] h-[35px] xxs:w-[230px] xs:w-[280px] bg-secondary rounded-[10px] font-karla font-light text-[#ffffff89] text-center" + className="xl:w-[297px] md:w-[297px] lg:w-[230px] xl:h-[46px] h-[35px] xxs:w-[230px] xs:w-[280px] bg-secondary rounded-[10px] font-karla font-light text-[#ffffff89] text-center" placeholder="search here..." type="text" onKeyDown={handleKeyDown} @@ -218,9 +218,11 @@ export default function Card() { {/* TYPE */} <div className="hidden lg:block text-start"> - <h1 className="font-bold pb-5 text-md pl-1 font-outfit">TYPE</h1> + <h1 className="font-bold xl:pb-5 pb-3 text-md pl-1 font-outfit"> + TYPE + </h1> <select - className="w-[297px] h-[46px] bg-secondary rounded-[10px] justify-between pl-[7.5rem] pr-5 flex items-center" + className="xl:w-[297px] xl:h-[46px] lg:h-[35px] lg:w-[230px] bg-secondary rounded-[10px] justify-between flex items-center text-center" value={type} onChange={(e) => handleTipe(e)} > @@ -234,9 +236,11 @@ export default function Card() { {/* SORT */} <div className="hidden lg:block text-start"> - <h1 className="font-bold pb-5 text-md pl-1 font-outfit">SORT</h1> + <h1 className="font-bold xl:pb-5 lg:pb-3 text-md pl-1 font-outfit"> + SORT + </h1> <select - className="w-[297px] h-[46px] bg-secondary rounded-[10px] flex items-center text-center" + className="xl:w-[297px] xl:h-[46px] lg:h-[35px] lg:w-[230px] bg-secondary rounded-[10px] flex items-center text-center" onChange={(e) => { setSelectedSort(e.target.value); setData(null); @@ -254,7 +258,7 @@ export default function Card() { {/* OPTIONS */} <div className="flex lg:gap-7 text-center gap-3 items-end"> <div - className="lg:w-[73px] w-[50px] lg:h-[46px] h-[35px] bg-secondary rounded-[10px] justify-center flex items-center cursor-pointer hover:bg-[#272b35] transition-all duration-300 group" + className="xl:w-[73px] w-[50px] xl:h-[46px] h-[35px] bg-secondary rounded-[10px] justify-center flex items-center cursor-pointer hover:bg-[#272b35] transition-all duration-300 group" onClick={handleVisible} > <svg @@ -275,7 +279,7 @@ export default function Card() { {/* TRASH ICON */} <div - className="lg:w-[73px] w-[50px] lg:h-[46px] h-[35px] bg-secondary rounded-[10px] justify-center flex items-center cursor-pointer hover:bg-[#272b35] transition-all duration-300 group" + className="xl:w-[73px] w-[50px] xl:h-[46px] h-[35px] bg-secondary rounded-[10px] justify-center flex items-center cursor-pointer hover:bg-[#272b35] transition-all duration-300 group" onClick={trash} > <svg @@ -295,7 +299,7 @@ export default function Card() { </div> </div> </div> - <div className="w-screen lg:w-[64%] flex lg:justify-end lg:pl-0"> + <div className="w-screen xl:w-[64%] flex xl:justify-end xl:pl-0"> <AnimatePresence> {isVisible && ( <m.div @@ -303,14 +307,14 @@ export default function Card() { initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} - className="lg:pb-16" + className="xl:pb-16" > - <div className="text-start items-center lg:items-start flex w-screen lg:w-auto px-8 lg:px-0 flex-row justify-between lg:flex-col pb-5 "> - <h1 className="font-bold lg:pb-5 text-md pl-1 font-outfit"> + <div className="text-start items-center xl:items-start flex w-screen xl:w-auto px-8 xl:px-0 flex-row justify-between xl:flex-col pb-5 "> + <h1 className="font-bold xl:pb-5 text-md pl-1 font-outfit"> GENRE </h1> <select - className="w-[195px] lg:w-[297px] lg:h-[46px] h-[35px] bg-secondary rounded-[10px] flex items-center text-center cursor-pointer hover:bg-[#272b35] transition-all duration-300" + className="w-[195px] xl:w-[297px] xl:h-[46px] h-[35px] bg-secondary rounded-[10px] flex items-center text-center cursor-pointer hover:bg-[#272b35] transition-all duration-300" onChange={(e) => setSelectedGenre( e.target.value === "undefined" @@ -329,8 +333,8 @@ export default function Card() { })} </select> </div> - <div className="lg:hidden text-start items-center lg:items-start flex w-screen lg:w-auto px-8 lg:px-0 flex-row justify-between lg:flex-col pb-5 "> - <h1 className="font-bold lg:pb-5 text-md pl-1 font-outfit"> + <div className="xl:hidden text-start items-center xl:items-start flex w-screen xl:w-auto px-8 xl:px-0 flex-row justify-between xl:flex-col pb-5 "> + <h1 className="font-bold xl:pb-5 text-md pl-1 font-outfit"> TYPE </h1> <select @@ -346,8 +350,8 @@ export default function Card() { </select> </div> - <div className="lg:hidden text-start items-center lg:items-start flex w-screen lg:w-auto px-8 lg:px-0 flex-row justify-between lg:flex-col "> - <h1 className="font-bold lg:pb-5 text-md pl-1 font-outfit"> + <div className="xl:hidden text-start items-center xl:items-start flex w-screen xl:w-auto px-8 xl:px-0 flex-row justify-between xl:flex-col "> + <h1 className="font-bold xl:pb-5 text-md pl-1 font-outfit"> SORT </h1> <select @@ -372,12 +376,12 @@ export default function Card() { <AnimatePresence> <div key="card-keys" - className="grid pt-3 lg:grid-cols-6 justify-items-center grid-cols-2 xxs:grid-cols-3 w-screen px-2 lg:w-auto lg:gap-10 gap-2 lg:gap-y-24 gap-y-12 overflow-hidden" + className="grid pt-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-6 justify-items-center grid-cols-2 xxs:grid-cols-3 w-screen px-2 xl:w-auto xl:gap-10 gap-2 xl:gap-y-24 gap-y-12 overflow-hidden" > {loading ? "" : !data?.length && ( - <div className="w-screen text-[#ff7f57] lg:col-start-3 col-start-2 items-center flex justify-center text-center font-bold font-karla lg:text-2xl"> + <div className="w-screen text-[#ff7f57] xl:col-start-3 col-start-2 items-center flex justify-center text-center font-bold font-karla xl:text-2xl"> Oops!<br></br> Nothing's Found... </div> )} @@ -387,7 +391,7 @@ export default function Card() { <m.div initial={{ scale: 0.9 }} animate={{ scale: 1, transition: { duration: 0.35 } }} - className="w-[146px] xxs:w-[115px] xs:w-[135px] md:w-[185px]" + className="w-[146px] xxs:w-[115px] xs:w-[135px] xl:w-[185px]" key={index} > <Link @@ -399,7 +403,7 @@ export default function Card() { className="" > <Image - className="object-cover bg-[#3B3C41] w-[146px] h-[208px] xxs:w-[115px] xxs:h-[163px] xs:w-[135px] xs:h-[192px] md:w-[185px] md:h-[265px] hover:scale-105 scale-100 transition-all cursor-pointer duration-200 ease-out rounded-[10px]" + className="object-cover bg-[#3B3C41] w-[146px] h-[208px] xxs:w-[115px] xxs:h-[163px] xs:w-[135px] xs:h-[192px] xl:w-[185px] xl:h-[265px] hover:scale-105 scale-100 transition-all cursor-pointer duration-200 ease-out rounded-[10px]" src={anime.coverImage.extraLarge} alt={anime.title.userPreferred} width={500} @@ -407,7 +411,7 @@ export default function Card() { /> </Link> <Link href={`/anime/${anime.id}`}> - <h1 className="font-outfit font-bold md:text-base text-[15px] pt-4 line-clamp-2"> + <h1 className="font-outfit font-bold xl:text-base text-[15px] pt-4 line-clamp-2"> {anime.status === "RELEASING" ? ( <span className="dots bg-green-500" /> ) : anime.status === "NOT_YET_RELEASED" ? ( @@ -416,7 +420,7 @@ export default function Card() { {anime.title.userPreferred} </h1> </Link> - <h2 className="font-outfit lg:text-[15px] text-[11px] font-light pt-2 text-[#8B8B8B]"> + <h2 className="font-outfit xl:text-[15px] text-[11px] font-light pt-2 text-[#8B8B8B]"> {anime.format || <p>-</p>} ·{" "} {anime.status || <p>-</p>} ·{" "} {anime.episodes || 0} Episodes @@ -431,10 +435,10 @@ export default function Card() { {[1, 2, 4, 5, 6, 7, 8].map((item) => ( <div key={item} - className="flex flex-col w-[135px] lg:w-[185px] gap-5" + className="flex flex-col w-[135px] xl:w-[185px] gap-5" style={{ scale: 0.98 }} > - <Skeleton className="h-[192px] w-[135px] lg:h-[265px] lg:w-[185px]" /> + <Skeleton className="h-[192px] w-[135px] xl:h-[265px] xl:w-[185px]" /> <Skeleton width={110} height={30} /> </div> ))} @@ -445,7 +449,7 @@ export default function Card() { {!loading && page > 10 && nextPage && ( <button onClick={() => setPage((p) => p + 1)} - className="bg-secondary md:w-[30%] w-[80%] h-10 rounded-md" + className="bg-secondary xl:w-[30%] w-[80%] h-10 rounded-md" > Load More </button> |